<template>
  <div ref="mapContainer" class="world-map" style="width: 100%; height: 100%"></div>
</template>

<script>
import worldJson from '@/assets/styles/json/world.json'
import * as echarts from 'echarts'

export default {
  name: 'WorldMap',
  data() {
    return {
      mapInstance: null,
      chartOptions: {
        backgroundColor: '#ffffff',
        tooltip: {
          trigger: 'item',
          formatter: params => {
            return params.data?.name || params.name
          }
        },
        geo: {
          map: 'world',
          zoom: 1.2,
          roam: true,
          label: {
            show: false,
            color: '#333',
            fontSize: 10
          },
          itemStyle: {
            areaColor: '#cdd7e2',
            borderColor: '#eee',
            borderWidth: 1
          },
          emphasis: {
            label: {
              show: true,
              color: '#333'
            },
            itemStyle: {
              areaColor: '#efefef'
            }
          }
        },
        series: [
          {
            name: 'Cities',
            type: 'scatter',
            coordinateSystem: 'geo',  // 确保指定坐标系
            symbol: 'pin',
            symbolSize: 12,
            itemStyle: {
              color: '#FF0000'
            },
            label: {
              show: false,
              formatter: '{b}',
              position: 'right',
              color: '#FF0000',
              fontSize: 8
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.initMap()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.mapInstance) {
      this.mapInstance.dispose()
    }
  },
  methods: {
    initMap() {
      echarts.registerMap('world', worldJson)
      this.mapInstance = echarts.init(this.$refs.mapContainer)
      this.updateMapData()
    },

    updateMapData() {
      // Western Europe countries
      const westernEurope = [
        {name: 'Austria', value: [14.550072, 47.516231]},
        {name: 'Belgium', value: [4.469936, 50.503887]},
        {name: 'France', value: [2.213749, 46.227638]},
        {name: 'Germany', value: [10.451526, 51.165691]},
        {name: 'Liechtenstein', value: [9.555373, 47.166]},
        {name: 'Luxembourg', value: [6.129583, 49.815273]},
        {name: 'Monaco', value: [7.412841, 43.738418]},
        {name: 'Netherlands', value: [5.291266, 52.132633]},
        {name: 'Switzerland', value: [8.227512, 46.818188]},
        {name: 'United Kingdom', value: [-3.435973, 55.378051]},
        {name: 'Ireland', value: [-8.24389, 53.41291]},
        {name: 'Portugal', value: [-8.224454, 39.399872]},
        {name: 'Spain', value: [-3.74922, 40.463667]},
        {name: 'Italy', value: [12.56738, 41.87194]},
        {name: 'Greece', value: [21.824312, 39.074208]},
        {name: 'Malta', value: [14.375416, 35.937496]},
        {name: 'San Marino', value: [12.457777, 43.94236]},
        {name: 'Vatican City', value: [12.453389, 41.902916]}
      ]

      // Chinese cities
      const chineseCities = [
        {name: '成都', value: [104.065735, 30.659462]},
        {name: '长沙', value: [112.982279, 28.19409]},
        {name: '西安', value: [108.948024, 34.263161]},
        {name: '郑州', value: [113.665412, 34.757975]},
        {name: '上海', value: [121.472644, 31.231706]},
        {name: '天津', value: [117.190182, 39.125596]},
        {name: '深圳', value: [114.057868, 22.543099]},
        {name: '青岛', value: [120.355173, 36.082982]},
        {name: '厦门', value: [118.11022, 24.490474]},
        {name: '宁波', value: [121.549792, 29.868388]}
      ]

      // 合并数据时保留原始配置
      const options = {
        ...this.chartOptions,
        series: [{
          ...this.chartOptions.series[0],
          data: [...westernEurope, ...chineseCities]
        }]
      }

      this.mapInstance.setOption(options)
    },

    handleResize() {
      if (this.mapInstance) {
        this.mapInstance.resize()
      }
    }
  }
}
</script>

<style scoped>
.world-map {
  width: 100%;
  height: 600px;
  border-radius: 4px;
  overflow: hidden;
}
</style>
